import {
  Button, Input, Form, Row, Col, Upload
} from "antd"
import {
  UploadOutlined
} from '@ant-design/icons'
import React, { useEffect, useState } from 'react'



const CollectionCreateForm = ({ onFormInstanceReady, onFileListChange }) => {
  const [form] = Form.useForm()
  const [fileList, setFileList] = useState([])

  useEffect(() => {
    onFormInstanceReady(form, fileList)
  }, [form, fileList])

  const onChange = ({ fileList: newFileList }) => {
    setFileList(newFileList)
    onFileListChange(newFileList) // 传递文件列表给父组件
  };

  return (
    <Form
      layout="vertical"
      form={form}
      validateTrigger="onBlur"
    >
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="name"
            label="算法名"
            rules={[
              {
                required: true,
                message: '请输入算法名',
              },
            ]}
          >
            <Input placeholder="请输入算法名" maxLength={20} autoComplete="off" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="url"
            label="算法链接"
            rules={[
              {
                required: true,
                message: '请输入算法链接',
              },
            ]}
          >
            <Input
              style={{
                width: '100%',
              }}
              addonBefore="http://"
              placeholder="请输入算法链接"
              maxLength={100}
              autoComplete="off"
            />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="tag"
            label="算法标签"
            rules={[
              {
                required: true,
                message: '标签请用"-"隔开',
              },
            ]}
          >
            <Input placeholder="标签请用 - 分隔,如a-b" maxLength={100} autoComplete="off" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="title"
            label="算法标题"
            rules={[
              {
                required: true,
                message: '请输入算法描述的标题',
              },
            ]}
          >
            <Input placeholder="请输入算法描述的标题" maxLength={20} autoComplete="off" />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>

      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <Form.Item
            name="description"
            label="Description"
            rules={[
              {
                required: true,
                message: '请输入算法的描述内容',
              },
            ]}
          >
            <Input.TextArea rows={4} placeholder="请输入算法的描述内容" maxLength={300} autoComplete="off" />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="index"
            label="入口文件"
            rules={[
              {
                required: true,
                message: '请输入入口文件',
              },
            ]}
          >
            <Input placeholder="请输入入口文件" maxLength={20} autoComplete="off" />
          </Form.Item>
        </Col>
      </Row>

      <Upload.Dragger
        name="files"
        multiple
        fileList={fileList}
        onChange={onChange}
        beforeUpload={() => false} // 阻止自动上传
      >
        <p className="ant-upload-drag-icon">
          <UploadOutlined />
        </p>
        <p>点击或拖拽文件夹到这里上传</p>
      </Upload.Dragger>
    </Form>
  )
}

export default CollectionCreateForm